@import "ui-variables";
@import "ui-mixins";
@import "octicon-mixins";

.list-group, .list-tree {
  li:not(.list-nested-item),
  li.list-nested-item > .list-item {
    .text(normal);
  }

  .generate-list-item-text-color(@class) {
    li:not(.list-nested-item).text-@{class},
    li.list-nested-item.text-@{class} > .list-item {
      .text(@class);
    }
  }
  .generate-list-item-text-color(subtle);
  .generate-list-item-text-color(info);
  .generate-list-item-text-color(success);
  .generate-list-item-text-color(warning);
  .generate-list-item-text-color(error);
  .generate-list-item-text-color(selected);

  .generate-list-item-status-color(@color, @status) {
    li:not(.list-nested-item).status-@{status},
    li.list-nested-item.status-@{status} > .list-item {
      color: @color;
    }

    li:not(.list-nested-item).selected.status-@{status},
    li.list-nested-item.selected.status-@{status} > .list-item {
      color: darken(@color, 7%);
    }
  }
  .generate-list-item-status-color(@text-color-subtle, ignored);
  .generate-list-item-status-color(@text-color-added, added);
  .generate-list-item-status-color(@text-color-renamed, renamed);
  .generate-list-item-status-color(@text-color-modified, modified);
  .generate-list-item-status-color(@text-color-removed, removed);

  li:not(.list-nested-item).selected,
  li.list-nested-item.selected > .list-item {
    .text(selected);
  }
}

.select-list ol.list-group,
&.select-list ol.list-group {
  li.two-lines {
    .secondary-line {
      color: @text-color-subtle;
    }

    &.selected .secondary-line {
      color: lighten(@text-color-subtle, 10%);
      text-shadow: none;
    }
  }

  // We want to highlight the background of the list items because we don’t know their size.
  li.selected {
    background-color: @background-color-selected;

    &:before {
      display: none;
      background: none;
    }
  }

  &.mark-active{
    @active-icon-size: 14px;

    // pad in front of the text where the icon would be We'll pad the non-
    // active items with a 'fake' icon so other classes can pad the item
    // without worrying about the icon padding.
    li:before {
      content: "";
      background-color: transparent;
      position: static;
      display: inline-block;
      left: auto; right: auto;
      height: @active-icon-size;
      width: @active-icon-size;
    }
    > li:not(.active):before {
      margin-right: @component-icon-padding;
    }
    li.active {
      .octicon(check, @active-icon-size);
      &:before {
        margin-right: @component-icon-padding;
        color: @text-color-success;
      }
    }
  }
}

autocomplete-suggestion-list .suggestion-list-scroller {
  border-radius: 0 !important;
}

autocomplete-suggestion-list .select-list.popover-list .suggestion-description {
  border-radius: 0 0 @component-border-radius @component-border-radius;
  background-color: @status-bar-background-color;
  color: @text-color;
  line-height: 1.15; // vertically center the text
  border-top: 1px solid @tab-bar-border-color;
}

.select-list.popover-list {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  padding: @component-padding/2;

  atom-text-editor {
    margin-bottom: @component-padding/2;
  }

  .list-group li {
    padding-left: @component-padding/2;
  }
}

autocomplete-suggestion-list.select-list.popover-list ol.list-group li:not(.selected) {
  background-color: @overlay-background-color;
}

autocomplete-suggestion-list .list-group .selected .icon-container .icon {
  color: @text-color-selected;
  background: darken(@background-color-selected, 10%);
}

.ui-sortable {
  li {
    line-height: 2.5;
  }

  // For sortable lists in the settings view
  li.ui-sortable-placeholder {
    visibility: visible !important;
    background-color: darken(@pane-item-background-color, 10%);
  }
}

li.ui-draggable-dragging, li.ui-sortable-helper {
  line-height: @component-line-height;
  height: @component-line-height;
  border: 0;
  border-radius: 0;
  list-style: none;
  padding: 0 @component-padding;
  background: @background-color-highlight;
  box-shadow: 0 0 1px @base-border-color;
}
